autofill 배경 변경

✒️ 2025-05-16 12:36 내용 수정

참고 자료 : css-tricks change-autocomplete-styles-webkit-browsers, velog docchi 태그 자동완성 시 배경색 변경, mdn web docs CSS Cascade

문제 상황

• 유투브 클론코딩 팀 프로젝트를 진행하면서 input에 자동 완성으로 텍스트를 채우면 내부 스타일이 자동으로 생성되었다.

• 개발자 도구에서 확인해보면 사용자 에이전트 스타일시트(User Agent StyleSheet, 브라우저 기본 제공)에 input:-infernal-autofill-selected 선택자에 background-color와 color가 설정되어 있다.

해결 방법

• :autofill 가상 클래스와 ::-webkit-autofill 가상 선택자를 사용하여 자동 완성 시 필드의 스타일을 변경할 수 있다.
• Chrome과 같은 Webkit 기반 브라우저에선 ::-webkit-autofill을 사용하여 스타일을 변경한다.
• 적용 결과 Chrome에서 autofill과 ::-webkit-autofill 모두 적용되었다.
  • 브라우저 상황에 따라 둘 중 하나를 골라서 적용하면 된다.

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	border : none;
	-webkit-text-fill-color: white;
	-webkit-box-shadow: 0 0 0px 1000px #303030 inset;
    box-shadow: 0 0 0px 1000px #303030 inset;
	transition: background-color 5000x ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
	-webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px #303030 inset;
    box-shadow: 0 0 0px 1000px #303030 inset;
    transition: background-color 5000s ease-in-out 0s;
}

• border와 -webkit-text-fill-color 설정을 테스트를 위해 잘 보이는 색으로 지정했을 때 자동 완성 후 스타일이 바뀐 것을 확인할 수 있다.

• border:none을 설정하고, 색상과 배경을 다른 요소에 맞췄을 때 텍스트만 깔끔하게 보인다.

• 이 방법을 적용했을 때 자동 완성 텍스트 입력 직후에 글자가 지정했던 색이 아닌 다른 색이 뜨는 문제는 아직 해결 방법을 찾지 못했다.